<template>
	<view>
		<image :src="oneImage" mode="widthFix" style="width: 100%;"></image>
		<view class="course-box" v-for="(i,index) in course" :key="index">
			<text>{{i.title}}</text>
			<view class="course-list">
				<image :src="i.image" mode=""></image>
				<view class="course-list-text">
					<text>{{i.text}}</text>
					<navigator :url="`/pages/publicView/publicView?url=${i.url}&title=${i.title}`">
						<button class="btn" size="mini" type="default">查看详情</button>
					</navigator>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				oneImage: 'https://lf-cdn-tos.bytescm.com/obj/static/toutiao/ep/official_web/static/media/solution2.90081fc1.png',
				course: []
			}
		},
		onLoad() {
			// 合作伙伴(请求)
			uni.request({
			    url: 'https://www.fastmock.site/mock/879378aa62ebe17ab98fcbab59be3425/uniapp/course', //仅为示例，并非真实接口地址。
			    success: (res) => {
					this.course = res.data.data
			        // this.text = 'request success';
			    }
			});
		},
		methods: {
			
		}
	}
</script>

<style scoped lang="scss">
.course-box{
	display: flex;
	flex-direction: column;
	text-align: center;
	text{
		font-size: 18px;
		font-weight: 500;
	}
	.course-list{
		display: flex;
		flex-direction: row;
		margin: 5px;
		image{
			width: 150px;
			height: auto;
			margin-right: 8px;
		}
		.course-list-text{
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			text-align: left;
			text{
				font-size: 12px;
			}
		}
	}
}
.btn{
	color: #fff;
	background-color: coral;
	border-color: coral;
}
</style>
